/* eslint-disable react/prefer-stateless-function */
import React, { Component, cloneElement, isValidElement } from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { noop } from "lodash";
import Popper from "../Popper";

class Dropdown extends Component {
  static propTypes = {
    trigger: PropTypes.string,
    theme: PropTypes.oneOf(["dark", ""]),
    content: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.element,
      PropTypes.func,
    ]),
    placement: PropTypes.string,
    showArrow: PropTypes.bool,
    className: PropTypes.string,
    visible: PropTypes.bool,
    closeAfterClick: PropTypes.bool,
    closeAfterMouseLeave: PropTypes.bool,
    children: PropTypes.node,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    theme: "",
    trigger: "click",
    placement: "bottomLeft",
    showArrow: false,
    closeAfterClick: true,
    closeAfterMouseLeave: false,
    onClick: noop,
  };

  render() {
    const { className, children, onClick, theme, ...restProps } = this.props;
    const isTriggerValid = isValidElement(children);

    return (
      <Popper
        {...restProps}
        type="dropdown"
        className={classNames("dropdown", `dropdown-${theme}`, className)}
        onClick={onClick}
      >
        {isTriggerValid ? (
          cloneElement(children, {
            className: classNames("is-trigger", children.props.className),
          })
        ) : (
          <span className="is-trigger">{children}</span>
        )}
      </Popper>
    );
  }
}

export default Dropdown;
